<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title data-l10n-id="zotcard-preferences-title"></title>
		<script src="chrome://zotero/content/include.js"></script>
		<link rel="localization" href="zotcard-preferences.ftl"/>
		<link rel="stylesheet" href="../modules/common.css" />
		<link rel="stylesheet" href="../modules/element-plus.css" />
		<script src="../modules/vue.global.prod.js"></script>
		<script src="../modules/element-plus.js"></script>
		<script src="../modules/element-plus-zh-cn.js"></script>
		<script src="../modules/element-plus-en.js"></script>
		<script src="../modules/element-plus-zh-tw.js"></script>
		<script src="../modules/element-plus-icons.js"></script>
		<script src="../modules/zot-render-element-plus.js"></script>
		<script src="zotcard-preferences.js"></script>
		<style>
			body {
				font-size: 10px;
				padding: 10px;
			}
			.tool-bar .el-button--small {
				--el-button-size: 20px;
				padding: 5px 5px;
				font-size: 10px;
			}
			.tool-bar {
				display: flex;
    			justify-content: space-between;
			}
			.tool-bar .el-button+.el-button {
				margin-left: 5px;
			}
			.tool-bar .tool-bar-group {
				margin-right: 0;
				display: inline;
			}
			.template {
				width: 100%;
			}
			.template .input {
				margin: 5px 0;
			}
			.preview {
				width: 100%;
			}
			.el-menu-item.disable {
				color: var(--el-text-color-disabled);
			}
			.el-menu-item.is-active.disable {
				color: var(--el-color-primary-light-5);
			}
			.template .el-color-picker {
				visibility: hidden;
				width: 5px;
			}
			.chars {
				display: flex;
				flex-wrap: wrap;
			}
			.chars > .el-button+.el-button, .chars > .el-button:first-child {
				margin: 0 10px 10px 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-aside width="200px">
					<el-menu :default-active="position">
						<el-menu-item :index="-1" @click="handleMenuOpen(-1)">
							<el-icon><Tools /></el-icon>
							<span data-l10n-id="zotcard-preferences-general">常规</span>
						</el-menu-item>
						<el-menu-item :class="e.card.visible ? '' : 'disable'" v-for="(e, i) in datas" :index="i" @click="handleMenuOpen(i)">
							<el-icon><Credit-Card v-if="e.default"></Credit-Card><Edit v-else></Edit></el-icon>
							<span>{{ e.card.label }}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<div v-if="position === -1">
						<el-form size="small" label-width="120px">
							<h1 data-l10n-id="zotcard-preferences-general-card">卡片</h1>
							<el-form-item>
								<template #label>
									<label data-l10n-id="zotcard-preferences-general-card-card_quantity">卡片数量</label>
								</template>
								<el-input-number v-model="prefs.card_quantity" @change="handlePrefsInput('card_quantity', prefs.card_quantity)" />
							</el-form-item>
							<el-form-item>
								<template #label>
									<label data-l10n-id="zotcard-preferences-general-card-card_backgroundColor">卡片背景</label>
								</template>
								<el-space>
									<!-- <el-color-picker v-model="prefs.note_background_color" @change="handlePrefsInput('note_background_color', prefs.note_background_color)">
									</el-color-picker> -->
									<el-button size="small" @click="handleNoteBackgroundColorResetDefault" data-l10n-id="zotcard-preferences-revert_to_default">还原到默认</el-button>
								</el-space>
							</el-form-item>
							<h1 data-l10n-id="zotcard-preferences-general-report">报告</h1>
							<el-form-item>
								<template #label>
									<label data-l10n-id="zotcard-preferences-general-report-startOfWeek">开始日期</label>
								</template>
								<el-select v-model="prefs.startOfWeek" size="small" @change="handlePrefsInput('startOfWeek', prefs.startOfWeek)">
									<el-option :value="ZotCardConsts.startOfWeek.sunday" :label="l10n('zotcard-preferences-general-report-startOfWeek-Sun')"></span></el-option>
									<el-option :value="ZotCardConsts.startOfWeek.monday" :label="l10n('zotcard-preferences-general-report-startOfWeek-Sat')"></span></el-option>
								</el-select>
							</el-form-item>
							<h1 data-l10n-id="zotcard-preferences-general-other">其他</h1>
							<el-form-item>
								<template #label>
									<label data-l10n-id="zotcard-preferences-general-other-word_count_style">卡片字数统计样式1</label>
								</template>
								<el-space direction="vertical" alignment="normal">
									<el-select v-model="prefs.word_count_style" size="small" @change="handlePrefsInput('word_count_style', prefs.word_count_style)">
										<el-option :value="ZotCardConsts.wordCountStyle.all" :label="l10n('zotcard-preferences-general-other-wordCountStyle-all')"></el-option>
										<el-option :value="ZotCardConsts.wordCountStyle.onlyWords" :label="l10n('zotcard-preferences-general-other-wordCountStyle-onlyWords')"></el-option>
									</el-select>
									<span class="text-color-placeholder" data-l10n-id="zotcard-preferences-general-other-enable_word_count_message">设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后...</span>
									<span class="text-color-placeholder" data-l10n-id="zotcard-preferences-general-other-word_count_style_message">设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后...</span>
								</el-space>
							</el-form-item>
							<el-form-item>
								<template #label>
									<label data-l10n-id="zotcard-preferences-general-other-imagemgr_tinify_api_key">Tinify Api Key</label>
								</template>
								<el-space direction="vertical" alignment="normal" class="fill">
									<el-input size="small" v-model="prefs.imagemgr_tinify_api_key" @input="handlePrefsInput('imagemgr.tinify_api_key', prefs.imagemgr_tinify_api_key)"></el-input>
									<span class="text-color-placeholder" data-l10n-id="zotcard-preferences-general-other-imagemgr_tinify_api_key_message">设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后设置之后...</span>
								</el-space>
							</el-form-item>
							<el-form-item>
								<template #label>
									<label data-l10n-id="zotcard-preferences-general-other-recently_move_collection_quantity">最近移动分类个数</label>
								</template>
								<el-input size="small" v-model="prefs.recently_move_collection_quantity" @input="handlePrefsInput('movemgr.recently_move_collection_quantity', prefs.recently_move_collection_quantity)"></el-input>
							</el-form-item>
						</el-form>
					</div>
					<el-form v-else size="small" label-width="60px">
						<el-form-item>
							<template #label>
								<label data-l10n-id="zotcard-preferences-label">菜单</label>
							</template>
							<el-input size="small" v-model="datas[position].card.label" @input="handleLabelInput" />
						</el-form-item>
						<el-form-item>
							<template #label>
								<label data-l10n-id="zotcard-preferences-visible">启动</label>
							</template>
							<el-switch size="small" v-model="datas[position].card.visible" @change="handleVisibleChange" />
						</el-form-item>
						<el-form-item>
							<template #label>
								<label data-l10n-id="zotcard-preferences-template">模板</label>
							</template>
							<div class="template">
								<div class="tool-bar">
									<div class="tool-bar-group">
										<div class="tool-bar-group">
											<el-button size="small" @click="handleStyles('B')">B</el-button>
											<el-button size="small" @click="handleStyles('I')">I</el-button>
											<el-button size="small" @click="handleStyles('U')">U</el-button>
											<el-button size="small" @click="handleStyles('S')">S</el-button>
											<el-button size="small" @click="handleStyles('pre')"><svg width="15px" height="15px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M10.6689782,9.21845958 C10.9812657,8.91680892 11.4679109,8.92570969 11.7697387,9.23859257 C12.0715666,9.55147544 12.0801529,10.0559448 11.7891604,10.3796704 L7.56205798,14.7615982 C7.25261554,15.0819756 6.75131828,15.0819756 6.44187585,14.7615982 L2.21477346,10.3796704 C1.92378094,10.0559448 1.93236723,9.55147544 2.2341951,9.23859257 C2.53602297,8.92570969 3.0226681,8.91680892 3.3349556,9.21845958 L7.00196691,13.0197819 L10.6689782,9.21845958 Z" fill="currentColor" fill-rule="nonzero" transform="translate(7.001967, 11.999914) rotate(90.000000) translate(-7.001967, -11.999914) "></path><path d="M20.6689782,9.21845958 C20.9812657,8.91680892 21.4679109,8.92570969 21.7697387,9.23859257 C22.0715666,9.55147544 22.0801529,10.0559448 21.7891604,10.3796704 L17.562058,14.7615982 C17.2526155,15.0819756 16.7513183,15.0819756 16.4418758,14.7615982 L12.2147735,10.3796704 C11.9237809,10.0559448 11.9323672,9.55147544 12.2341951,9.23859257 C12.536023,8.92570969 13.0226681,8.91680892 13.3349556,9.21845958 L17.0019669,13.0197819 L20.6689782,9.21845958 Z" fill="currentColor" fill-rule="nonzero" transform="translate(17.001967, 11.999914) scale(-1, 1) rotate(90.000000) translate(-17.001967, -11.999914) "></path></g></svg></el-button>
										</div>
										<el-divider direction="vertical"></el-divider>
										<div class="tool-bar-group">
											<el-button size="small" @click="handleStyles('h1')" data-l10n-id="zotcard-preferences-title1">标题1</el-button>
											<el-button size="small" @click="handleStyles('h2')" data-l10n-id="zotcard-preferences-title2">标题2</el-button>
											<el-button size="small" @click="handleStyles('h3')" data-l10n-id="zotcard-preferences-title3">标题3</el-button>
											<el-button size="small" @click="handleStyles('p')" data-l10n-id="zotcard-preferences-paragraph">段落</el-button>
											<el-button size="small" @click="handleStyles('blockquote')" data-l10n-id="zotcard-preferences-quote">引用</el-button>
										</div>
										<el-divider direction="vertical"></el-divider>
										<div class="tool-bar-group">
											<el-button size="small" @click="handleStyles('left')"><svg t="1654269604433" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3167" width="12" height="12"><path d="M162.304 186.88H865.28v63.488H162.304zM162.304 376.832h534.528V440.32H162.304zM162.304 567.296H865.28v63.488H162.304zM162.304 757.248h534.528v63.488H162.304z" fill="#000000" p-id="3168"></path></svg></el-button>
											<el-button size="small" @click="handleStyles('center')"><svg t="1654269545134" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1289" width="12" height="12"><path d="M162.304 186.88H865.28v63.488H162.304zM246.272 376.832h534.528V440.32H246.272zM162.304 567.296H865.28v63.488H162.304zM246.272 757.248h534.528v63.488H246.272z" fill="#2c2c2c" p-id="1290"></path></svg></el-button>
											<el-button size="small" @click="handleStyles('right')"><svg t="1654269627584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3369" width="12" height="12"><path d="M162.304 186.88H865.28v63.488H162.304zM330.752 376.832H865.28V440.32H330.752zM162.304 567.296H865.28v63.488H162.304zM330.752 757.248H865.28v63.488H330.752z" fill="#2c2c2c" p-id="3370"></path></svg></el-button>
										</div>
										<el-divider direction="vertical"></el-divider>
										<div class="tool-bar-group">
											<el-button for="color-picker" size="small" @click="handleFontColor"><svg t="1654597526507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="825" width="12" height="12"><path d="M839 768H735.3l-74.1-192.7H358.6L288.7 768H185L461.8 64h100.4L839 768zM632.1 495.8L522.3 203.1c-3.4-9.4-7.2-25.7-11.3-49.1h-2.3c-3.4 21.2-7.4 37.6-11.7 49.1L388.1 495.8h244z" fill="#2c2c2c" p-id="826" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path><path d="M64 832h896v128H64z" fill="#CE6043" p-id="827"></path></svg></el-button>
											<el-color-picker id="font-color-picker" @change="handleFontColorChange" size="small"></el-color-picker>
											<el-button size="small" @click="handleBackgroundColor"><svg width="15px" height="15px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="text-color" fill-rule="evenodd"><rect x="3" y="18" width="3.6495" height="3" fill="#d6b728" stroke-width=".45028"></rect><rect x="6.6495" y="18" width="3.6391" height="3" fill="#ff6666" stroke-width=".44963"></rect><rect x="10.289" y="18" width="3.5477" height="3" fill="#5fb236" stroke-width=".44395"></rect><rect x="13.836" y="18" width="3.677" height="3" fill="#2ea8e5" stroke-width=".45197"></rect><rect x="17.513" y="18" width="3.4867" height="3" fill="#a28ae5" stroke-width=".44012"></rect><g id="highlight-bg-color" fill="none" fill-rule="evenodd"><path id="Shape" d="m7.7 16.72h-4.7l3.35-3.34-0.79-0.79 4.59-4.59 4.14 4.14-4.14 4.14c-0.19781 0.19178-0.51219 0.19178-0.71 0l-0.65-0.66zm5.09-7.4811-1.79-1.79 2.93-2.9c0.74342-0.73191 1.9366-0.73191 2.68 0l1.4 1.45c0.73734 0.74119 0.73734 1.9388 0 2.68l-2.9 2.9-1.79-1.8-0.53-0.54" fill="currentColor" fill-rule="nonzero"></path></g></g></svg></el-button>
											<el-color-picker id="background-color-picker" @change="handleBackgroundColorChange" size="small"></el-color-picker>
										</div>
									</div>
									<div class="tool-bar-group">
										<el-popover
											placement="bottom"
											:width="400"
											:visible="popover.chars"
										>
											<template #reference>
												<el-button size="small" @click="handleShowCharsPopover">⦿</el-button>
											</template>
											<template #default>
												<div class="chars">
													<el-button plain v-for="c in chars" @click="handleSChars(c.value)">{{ c.name }}</el-button>
												</div>
											</template>
										</el-popover>
										<el-popover
											placement="bottom"
											:width="550"
											:visible="popover.emojis"
										>
											<template #reference>
												<el-button size="small" @click="handleShowEmojisPopover">🤪</el-button>
											</template>
											<template #default>
												<el-tabs>
													<el-tab-pane v-for="e in emojis" :label="e.name">
														<div class="chars">
															<el-button plain v-for="c in e.values" @click="handleEmojis(c)" style="font-size: 20px;" size="large">{{ c }}</el-button>
														</div>
													</el-tab-pane>
												</el-tabs>
											</template>
										</el-popover>
										<el-popover
											placement="bottom"
											:width="500"
											:visible="popover.fields"
										>
											<template #reference>
												<el-button size="small" @click="handleShowFieldsPopover" data-l10n-id="zotcard-preferences-field">字段</el-button>
											</template>
											<template #default>
												<el-tabs size="small">
													<el-tab-pane v-for="e in fields" :label="e.name">
														<el-space direction="vertical" fill style="width: 100%;">
															<el-input v-model="searchField" placeholder="Search"></el-input>
															<div class="chars">
																<el-button plain v-for="c in filterField(e.values)" @click="handleFileds(c.value)">{{ c.name }}</el-button>
															</div>
														</el-space>
													</el-tab-pane>
												</el-tabs>
											</template>
										</el-popover>
									</div>
								</div>
								<el-input class="input" type="textarea" v-model="datas[position].card.card" @focus="handleTemplateFocus" @input="handleTemplateInput" :rows="15"></el-input>
								<div class="tool-bar">
									<div class="tool-bar-group">
										<el-button size="small" @click="handleResetDefault" data-l10n-id="zotcard-preferences-revert_to_default">还原到默认</el-button>
									</div>
									<div class="tool-bar-group">
										<el-button size="small" @click="handleToRSS" data-l10n-id="zotcard-preferences-card_community">卡片社区</el-button>
									</div>
								</div>
							</div>
						</el-form-item>
						<el-form-item>
							<template #label>
								<label data-l10n-id="zotcard-preferences-preview">预览</label>
							</template>
							<el-card class="preview" :style="`background-color: ${prefs.note_background_color};`" @click="handlePreview">
								<div v-if="preview" v-html="preview"></div>
								<div v-else class="vcenter">
									<el-empty></el-empty>
								</div>
							</el-card>
						</el-form-item>
					</el-form>
				</el-main>
			  </el-container>
		</div>
	</body>
</html>
